fix: prevent profile metadata text from collapsing#474
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request adds a new user profile for Gulshan and updates the profile card layout in src/index.njk with a minimum width constraint. The review feedback identifies a potential layout overflow issue on narrow viewports caused by the specific minimum width and suggests using a smaller value or enabling flex wrapping. Additionally, the reviewer noted trailing whitespace and a missing trailing newline in the newly added YAML file.
|
Please resolve the conflicts |
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request updates the person card layout in src/index.njk by adding a minimum width to the name and role container. The review feedback correctly identifies that the hardcoded 150px value could lead to layout overflow on small mobile devices and suggests using a standard Tailwind spacing class like min-w-32 to ensure better responsiveness and consistency with the CSS framework.
| <div class="p-8"> | ||
| <div class="flex justify-between items-start gap-4"> | ||
| <div class="flex-1"> | ||
| <div class="flex-1 min-w-[150px]"> |
There was a problem hiding this comment.
The hardcoded minimum width of 150px may cause layout overflow on small mobile devices. On a 320px wide screen, the card's p-8 padding (64px total) leaves only 256px of content space. Combining this 150px div with the sibling's 112px (7rem) and the 16px (gap-4) results in a total width of 278px, exceeding the container. Consider using a standard Tailwind spacing value like min-w-32 (128px) to ensure the layout fits on small screens while still preventing the metadata from collapsing.
<div class="flex-1 min-w-32">
References
- Adhere to the project's existing CSS framework (Tailwind CSS) conventions by using the standard spacing scale instead of arbitrary values, and ensure responsive layouts do not overflow on small screens.
There was a problem hiding this comment.
Pull request overview
This PR addresses issue #468 by adding a minimum width constraint to the name/role flex item on the index page, preventing the adjacent metadata block from being squeezed into overly narrow word-by-word stacks on small widths.
Changes:
- Add
min-w-[150px]to the left (flex-1) container within the user card header row to preserve a more balanced layout at tight widths.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Fixes #468
Added a minimum width to the flex container to prevent profile metadata
from collapsing into narrow vertical text stacks on smaller widths.